<template>
  <baseCard title="应用运行详情"
            :height="height"
            :contentStyle="{ display: 'block' }">
    <!-- <template v-slot:right>
      <vptSelect
        class="es-select-app"
        :label="'节点/实例'"
        :width="1.6"
        labelWidth="0.7rem"
        :options="options"
        :value="defaultValue"
        @change-tab="onChangeTab"
      ></vptSelect>
    </template> -->
    <div class="content">
      <vptItemView :title="detailsData?.cluster_name_zh_cn"
                   :itemTitleStyle="itemTitleStyle">
        <template v-slot:title>
          <img class="vpt-img"
               src="@/assets/img/theme1/arrow-right.png"
               alt="" />
          <vptPalnTag :type="
              detailsData?.process_status == 3
                ? 'success'
                : detailsData?.process_status == 2
                ? 'warn'
                : 'danger'
            "
                      :text="
              detailsData?.process_status == 3
                ? '正常'
                : detailsData?.process_status == 2
                ? '提示'
                : '告警'
            "></vptPalnTag>
        </template>
      </vptItemView>
      <section class="vpt-body">
        <div class="section-content">
          <div class="section-left">
            <vptItemView :title="'容器组(pod)'"
                         :showList="true">
              <div class="box">
                <div class="item-data">
                  <label :style="labelStyle">提示</label>
                  <span :style="valueStyle"
                        class="vpt-em-organge">
                    {{ addThousandsSeparator(detailsData?.prompt) }}
                  </span>
                </div>
                <div class="item-data">
                  <label :style="labelStyle">告警</label>
                  <span :style="valueStyle1"
                        class="vpt-em-red">
                    {{ addThousandsSeparator(detailsData?.warning) }}
                  </span>
                </div>
              </div>
            </vptItemView>
          </div>
          <div class="section-right">
            <vptItemView :title="'资源使用情况（使用率）'"
                         :showList="true"
                         :itemStyle="itemStyle">
              <template v-slot:content>
                <vptPieView width="110"
                            height="110"
                            :cpu_usage="detailsData?.cpu_usage"
                            :disk_usage="detailsData?.disk_usage"
                            :memory_usage="detailsData?.memory_usage"
                            :isLandscape="isLandscape"
                            :titleFontSize="titleFontSize"
                            :totalFontSize="totalFontSize"
                            :titleTop="titleTop"></vptPieView>
              </template>
            </vptItemView>
          </div>
        </div>

        <vptItemView :title="'提示/告警问题'"
                     :itemStyle="palnListStyle">
          <template v-slot:content>
            <vptPalnList type="modal"
                         :list="detailsData?.prompt_content"
                         :planListStyle="planListStyle"
                         :itemLeftStyle="itemLeftStyle"
                         :messageStyle="messageStyle"></vptPalnList>
          </template>
        </vptItemView>
      </section>
    </div>
    <div class="bottom">
      <div class="response">
        <vptItemView :title="'响应量'">
          <template v-slot:content>
            <div class="vpt-list">
              <div class="item-data">
                <div class="item-data-val" style="color: #1D2129">
                  {{ addThousandsSeparator(detailsData?.request_time_avg) }}
                  ms
                </div>
                <label>平均响应时间</label>
              </div>
              <div class="item-data">
                <div class="item-data-val" style="color: #1D2129">
                  {{ addThousandsSeparator(detailsData?.request_num_max) }}
                </div>
                <label>峰值请求数</label>
              </div>
              <div class="item-data">
                <div class="item-data-val" style="color: #1D2129">
                  {{ addThousandsSeparator(detailsData?.response_time) }}
                  ms
                </div>
                <label>最大/最小响应时间</label>
              </div>
            </div>
          </template>
        </vptItemView>

        <vptItemView :title="'近30天峰值请求数'"
                     :itemStyle="itemStyle">
          <template v-slot:content>
            <vptReuqestView v-if="
                detailsData &&
                detailsData.request_num_max_30days &&
                detailsData.request_num_max_30days.length > 0
              "
                            :height="lineHeight"
                            :chartData="detailsData?.request_num_max_30days"
                            :isLandscape="isLandscape"
                            :yAxisFontSize="yAxisFontSize" />
            <div class="empty-div"
                 v-else>暂无数据</div>
          </template>
        </vptItemView>
      </div>
      <vptMonitoringPanel :chartData="chartData[0]?.request_num_30days"
                          :legendData="legendData1"
                          title="近30天CPU使用率趋势"></vptMonitoringPanel>
      <vptMonitoringPanel :chartData="chartData[1]?.request_num_30days"
                          :legendData="legendData2"
                          title="近30天内存使用率趋势"></vptMonitoringPanel>
      <vptMonitoringPanel :chartData="chartData[2]?.request_num_30days"
                          :legendData="legendData3"
                          :color="colorData"
                          title="近30天储存资源使用率趋势"></vptMonitoringPanel>
    </div>
  </baseCard>
</template>

<script setup>
import { ref, computed } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import vptSelect from "@/components/form/vpt-select/index.vue";
import vptPieView from "@/components/modal/vpt-modal-app-run/components/vpt-pie-view.vue";
import vptItemView from "@/components/modal/vpt-modal-app-run/components/vpt-item-view.vue";
import vptReuqestView from "@/components/modal/vpt-modal-app-run/components/vpt-reuqest-view.vue";
import vptMonitoringPanel from "@/components/vpt-monitoring-panel-1001/index.vue";
import vptPalnTag from "@/components/vpt-base-tag";
import vptPalnList from "@/components/vpt-base-msg-list";
import { addThousandsSeparator } from "@/utils/formatter.js";

const props = defineProps({
  height: { type: String, default: "" },
  detailsData: {
    type: Array,
    default: () => [],
  },
  chartData: { type: Array, default: () => [] },
  isLandscape: { type: Boolean, default: false },
  itemTitleStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.18rem",
    }),
  },
  labelStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.16rem",
      color: "#86909C",
      marginBottom: "0.16rem",
      //   marginRight: "0.1rem",
    }),
  },
  valueStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.18rem",
      color: "#151A24",
    }),
  },
  valueStyle1: {
    type: Object,
    default: () => ({
      fontSize: "0.18rem",
      color: "#F53F3F",
    }),
  },
  titleFontSize: { type: Number, default: 12 },
  totalFontSize: { type: Number, default: 14 },
  titleTop: { type: String, default: "25" },
  pieWidth: {
    type: String,
    default: "130",
  },
  pieHeight: {
    type: String,
    default: "130",
  },
  yAxisFontSize: {
    type: Number,
    default: 14,
  },
  planListStyle: {
    type: Object,
    default: () => ({
      height: "auto",
      maxHeight: "1.42rem",
      marginTop: "0.16rem",
      width: "100%",
      paddingRight: "0.1rem",
    }),
  },
  itemLeftStyle: {
    type: Object,
    default: () => ({
      width: "95%",
      "--bef-height": "0.18rem",
    }),
  },
  messageStyle: {
    type: Object,
    default: () => ({
      width: "5.9rem",
      "white-space": "wrap",
      "-webkit-line-clamp": 3,
      "-webkit-box-orient": "vertical",
      display: "-webkit-box",
    }),
  },
  lineHeight: {
    type: String,
    default: "0.95rem",
  },
});

const legendData1 = ["CPU使用率", "近30天平均使用率"];
const legendData2 = ["内存使用率", "近30天平均使用率"];
const legendData3 = ["CPU使用率", "储存资源总量的90%"];
const colorData = ["#2175DB", "#F53F3F"];
</script>

<style lang="less" scoped>
@import url("./index.less");
.content {
  width: 100%;
  // height: 100%;
  // height: 5.46rem;
  overflow-y: auto;
  padding-right: 0.08rem;
  .vpt-img {
    width: 0.18rem;
  }
  .vpt-body {
    height: 3.3rem;
    margin-top: 0.16rem;
    padding: 0.16rem 0.16rem;
    // font-family: HarmonyOS_Sans_SC;
    background: #fff;
    border: 0.01rem solid #e6ebf5;

    .section-content {
      height: 1.55rem;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .section-left {
        width: 3.76rem;
        // width: 45%;
        padding-right: 0.2rem;

        .box {
          width: 100%;
          background: #FDFEFF;
          margin-top: 0.04rem;
          padding: 0.24rem 0;
          height: 0.6rem;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .item-data {
            display: flex;
            flex-direction: column;
          }
        }
      }

      .section-right {
        flex: 1;
        // padding-left: 0.24rem;
        // border-left: 2px solid #384d64;
      }
    }
  }
  .vpt-body:first-child {
    margin-top: 0;
  }
}
.bottom {
  margin-top: 0.16rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  :nth-child(odd) {
    margin-right: 0.16rem;
  }
  .response {
    width: 3.43rem;
    // max-width: 3.5rem;
    // min-width: 3.43rem;
    height: 1.9rem;
    padding: 0.16rem;
    background: #fff;
    border: 0.01rem solid #e6ebf5;
    margin-bottom: 0.16rem;
  }
}
</style>
